<template>
  <div class="wyyheader-main">
		<div class="main-left">
			<div class="loginimg">
				login
			</div>
			<div :class="{'left-input':true,'bor':bordertype}">
				<input @input="searchMultimatch(value)" v-model="value" @click="bordertype = !bordertype"  type="text" placeholder="搜索音乐,歌手,歌词,用户"/>
				<span><i class="iconfont icon-sousuo"></i></span>
				<div :class="{'left-input-select':true,'select-input':bordertype}">
					<div class="dq" v-if="searchmultimatchobj">
						<p>单曲</p>
						<p>1233</p>
					</div>
					<div class="gq">
						<p>歌手</p>
						<p>1233</p>
					</div>
					<div class="zj">
						<p>专辑</p>
						<p>1233</p>
					</div>
					<div class="mv" v-if="searchmultimatchobj.mv">
						<p>专辑</p>
						<p v-for="(itemmv,indexmv) in searchmultimatchobj.mv">{{}}</p>
					</div>
				</div>
			</div>
			
		</div>
		<div class="main-right">
			<div class="item-left">
			    <div @click="$router.go(-1)" style="display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;background-color: #D9D9D9; border-radius: 50%;"><i class="iconfont icon-houtui1"></i> </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<div style="display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;background-color: #D9D9D9;border-radius: 50%;"><i class="iconfont icon-qianjin-tongyong"></i> </div>
			</div>
			<div class="item-right">
				<img src="../../assets/img/1.jpg" />
				<span>小问号</span>
				<span><i class="iconfont icon-xiaoxixinfengnews"></i></span>
				<span><i class="iconfont icon-shezhi"></i></span>
				<div style="width: 1px;height: 25px;background-color: #000000;margin: 0 10px;"></div>
				<span><i class="iconfont icon-fenxiang"></i></span>
				<span><i class="iconfont icon-minimum"></i></span>
				<span><i class="iconfont icon-quanping"></i></span>
				<span><i class="iconfont icon-guanbi"></i></span>
			</div>
		</div>
  </div>
</template>
<script>
import {debounce,throttle} from '@/assets/js/debounce.js'
export default{
  data () {
    return {
		value:'',
		bordertype:false,
		searchmultimatchobj:{}
    }
  },
  components: {

  },
  methods: {
	searchMultimatch: throttle(function(e){
		console.log(e)
		this.$api.search_suggest({
			keywords:e
		}).then(res=>{
			this.searchmultimatchobj = res.result
			console.log(res)
		})
	},500)
  },
  mounted() {
  	this.searchMultimatch();
  }
}
</script>

<style scoped="scoped">
	.wyyheader-main{
		display: flex;
		align-items: center;
		height: 50px;
		background-color: #FF0000;
	}
	.main-left{
		display: flex;
		align-items: center;
		flex: 1;
		height: 100%;
	}
	.main-right{
		height: 100%;
		display: flex;
		justify-content: space-between;
		frx: 1;
	}
	.left-input{
		position: relative;
		display: flex;
		align-items: center;
		font-size: 12px;
		border-radius: 20px;
		width: 300px;
		height: 25px;
		transition: all 0.8s;
		border: 1px solid #000000;
	}
	.bor{
		border-bottom-color:transparent !important;
		border-radius: inherit!important;
	}
	
	.left-input .left-input-select{
		position: absolute;
		top: 24px;
		background-color: #999999;
		width: 100%;
		height: 0;
		z-index: 12;
		overflow: hidden;
		transition: height 0.3s;
	}
	.left-input-select div p:nth-child(1){
		background-color: #D9D9D9;
	}
	.left-input .select-input{
		min-height: 300px;
		overflow: inherit;
	}
	.loginimg{
		display: flex;
		justify-content: center;
		width: 200px;
	}
	.left-input input{
		z-index: 2;
		width: 100%;
		display: flex;
		height: 25px;
		border: none;
		align-items: center;
		padding: 0 40px 0 10px;
		background-color: #E5E5E5;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		outline:none;
		border-style:none none none none; /*  上 右 下  左 */
		background-color:transparent;
	}
	.left-input span{
		position: absolute;
		width: 25px;
		font-size: 12px;
		right: 0;
	}
	.item-right{
		display: flex;
		align-items: center;
		font-size: 12px;
		/* width: 600px; */
	}
	.item-left{
		display: flex;
		align-items: center;
		font-size: 12px;
		margin-left: 20px;
	}
	.item-left i{
		cursor: pointer;
	}
	.item-left div:hover{
		background-color: #999999!important;
	}
	.item-right img{
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin: 0 10px 0 50px;
	}
	.item-right span{
		text-align: center;
		font-size: 12px;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
	.item-right span:hover{
		cursor: pointer;
		color: #FFFFFF;
		background-color: #999999;
	}
</style>
